<template>
  <div class="w-full h-full flex justify-between">
    <div class="menu-aside">
      <game-list-aside @init="handleChange" @change="handleChange" />
    </div>
    <div class="view-main">
      <div class="w-full h-full box-border p-[15px] flex flex-col justify-between">
        <div class="flex items-center justify-between border py-[6px] px-[10px] rounded-md">
          <section class="flex">
            <div class="mr-[20px]">期号: {{ state.data.Issue }}</div>
            <div class="mr-[20px]">总金额: <ui-amount :num="state.data.Amount" /></div>
            <div class="mr-[20px]">参与人数: {{ state.data.Person }}</div>
            <div class="mr-[20px]">开奖时间: {{ formatDate(state.data.Time) }}</div>
          </section>
          <section class="flex items-center">
            <el-button type="primary" size="small" round @click="getData">刷新</el-button>
            <div class="w-[80px] text-center mx-[10px]">
              {{ count == 0 ? "手动" : count + "秒" }}
            </div>
            <el-select v-model="monitorTimer" size="small">
              <el-option
                size="small"
                v-for="item in timerList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </section>
        </div>
        <div class="grow-[1] h-0 overflow-hidden mt-[10px] p-[10px] border">
          <ScList
            v-loading="state.loading"
            :list="state.list"
            v-if="currentData?.CategoryId == GameCategory.sc"
          />
          <SscList
            v-loading="state.loading"
            :list="state.list"
            v-if="currentData?.CategoryId == GameCategory.ssc"
          />
          <PcddList
            v-loading="state.loading"
            :list="state.list"
            v-if="currentData?.CategoryId == GameCategory.pcdd"
          />
          <LhcList
            v-loading="state.loading"
            :list="state.list"
            v-if="currentData?.CategoryId == GameCategory.lhc"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import ScList from "./components/sc-list.vue";
import SscList from "./components/ssc-list.vue";
import PcddList from "./components/pcdd-list.vue";
import LhcList from "./components/lhc-list.vue";

import { reqReportRealTime } from "@/api/monitor";
import { formatDate } from "@/utils/common";
import { GameCategory } from "@/enums";
import { useTimerStore } from "@/store/modules/timer";
import { storeToRefs } from "pinia";

interface State {
  loading: boolean;
  data: MonitorMo;
  list: MonitorMoTableList;
}

const currentData = ref<GameLeftMo | null>(null);

let timer: any;
const timerStore = useTimerStore();
const { timerList, monitorTimer } = storeToRefs(timerStore);
const count = ref(monitorTimer.value);

const state = reactive<State>({
  loading: false,
  data: {
    Table: {},
    Amount: 0,
    CategoryId: 0,
    Issue: "",
    Person: 0,
    Time: ""
  },
  list: []
});

// 切换游戏
const handleChange = (item: GameLeftMo) => {
  currentData.value = item;
};

// 获取消息
const getData = async () => {
  if (!currentData.value) return;
  try {
    state.loading = true;
    const res = await reqReportRealTime(currentData.value.LotteryId);
    state.loading = false;
    state.data = res.data;
    const list = [];
    for (let key in res.data.Table) {
      list.push({
        name: key,
        arr: res.data.Table[key]
      });
    }
    state.list = list;
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};

const setTimer = () => {
  clearInterval(timer);
  timer = null;
  if (monitorTimer.value > 0) {
    timer = setInterval(() => {
      count.value--;
      if (count.value == 0) {
        count.value = monitorTimer.value;
        getData();
      }
    }, 1000);
  } else {
    clearInterval(timer);
    timer = null;
    count.value = 0;
  }
};

watch(
  () => currentData.value,
  () => {
    count.value = monitorTimer.value;
    nextTick(() => {
      getData();
      setTimer();
    });
  }
);

watch(
  () => monitorTimer.value,
  val => {
    count.value = val;
    nextTick(setTimer);
  }
);
onMounted(() => {
  setTimer();
});
onUnmounted(() => {
  clearInterval(timer);
  timer = null;
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  font-size: 13px !important;
}
:deep() {
  .el-input,
  .el-textarea {
    --el-input-bg-color: #f9f9f9;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: bold;
  }
}
</style>
